<template>
  <div>
    <!--    <div class="header">-->
    <!--      <el-image class="header_logo" :src="logoUrl">-->
    <!--        <div slot="error" class="image-slot">-->
    <!--          <i class="el-icon-picture-outline"></i>-->
    <!--        </div>-->
    <!--      </el-image>-->
    <div class="header">
      <nav-menu></nav-menu>
      <div style="background: #278ff0;margin-top: 66px">
        <el-menu :default-active="activeIndex"
                 mode="horizontal"
                 @select="handleSelect"
                 style="margin-left: 7%"
                 background-color="#278ff0"
                 text-color="white"
                 active-text-color="">
          <el-menu-item index="1">
            <!--          <i class="el-icon-menu"></i>-->
            <span slot="title">总体</span>
          </el-menu-item>
          <el-menu-item index="2">
            <!--          <i class="el-icon-document"></i>-->
            <span slot="title">压气机</span>
          </el-menu-item>
          <el-menu-item index="3">
            <!--          <i class="el-icon-setting"></i>-->
            <span slot="title">燃烧</span>
          </el-menu-item>
        </el-menu>

        <!--        <gSearch class="header_search"/>-->
        <div class="header_search">
          <el-input placeholder="请输入搜索内容" clearable v-model="input" class="input-with-select" style="width:500px">
            <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
          </el-input>
        </div>
      </div>

    </div>
    <!--    </div>-->
    <div class="body">
      <el-divider>知识图谱</el-divider>
      <div class="gContainer">
        <div class="chart_graph">
          <!--        <chartTree :data="treeData" ref="tree"></chartTree>-->
          <chartGraph :data="activeIndex" :other-tech.sync="tech" ref="tree"></chartGraph>
        </div>
      </div>
      <el-divider>图表</el-divider>
      <div class="chart_barHor">
        <div>机构发文数量</div>
        <chartBarHorizontal :data="barData"></chartBarHorizontal>
      </div>
      <div class="chart_line">
        <div>技术点文献数量</div>
        <chartLine :legend="lineLegend" :xAxis="lineTimes"
                   :series="lineData"></chartLine>
      </div>
    </div>
  </div>

</template>

<script>

// import chartBarHorizontal from '@components/chartBarHorizontal'
// import chartLine from '@components/chartLine'
// import chartGraph from "@components/chartGraph"
import NavMenu from "@/components/NavMenu";
import chartBarHorizontal from "@/components/chartBarHorizontal";
import chartLine from "@/components/chartLine";
import chartGraph from "@/components/chartGraph";

export default {
  name: 'Techpage',
  inject: ['reload'],
  components: {
    NavMenu,
    chartBarHorizontal,
    chartLine,
    chartGraph
  },
  computed: {},
  data() {
    return {
      // d3jsonParser()处理 json 后返回的结果
      type: '总体',
      typeMap: {
        1: '总体',
        2: '压气机',
        3: '燃烧'
      },
      // logoUrl: require('@/assets/logo.png'),
      input: '',
      data: {
        nodes: [],
        links: []
      },

      activeIndex: '',
      activeToGraph: '',
      tech: {},
      institution: [],
      pubnum: [],
      barData: [],

      lineData: [],
      lineLegend: [],
      lineTimes: []
    }
  },
  mounted() {
    console.log('paper2:', this.$route)
    if (JSON.stringify(this.$route.query) === '{}') {
      this.$message.error('跳转参数错误')
    } else {
      this.type = this.$route.query.type
      if (this.type === '压气机') {
        this.activeIndex = '2'
      } else if (this.type === '燃烧') {
        this.activeIndex = '3'
      } else {
        this.activeIndex = '1'
      }
      this.$message.success('加载数据中...')
      if (JSON.stringify(this.tech) !== '{}') {
        this.initPage()
      }
    }
  },
  methods: {
    initPage() {
      this.institution = this.tech.institution
      this.pubnum = this.tech.pubnum

      this.barData = []
      this.institution.forEach((item, index) => {
        this.barData.push([item, this.pubnum[index]])
      })

      this.lineTimes = this.tech.lineTimes
      this.lineLegend = this.tech.lineLegend
      this.lineData = []
      this.tech.lineData.forEach(item => {
        this.lineData.push({
          name: item.name,
          type: 'line',
          data: item.date
        })
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      this.activeIndex = keyPath[0]
    },
    onSearch() {
      this.$router.push({
        path: '/search',
        query: {
          keyword: this.input
        }
      })
    }
  },
  watch: {
    tech: {
      handler() {
        if (JSON.stringify(this.tech) !== '{}') {
          this.initPage()
        }
      }
    },
    activeIndex: {
      handler(newVal, oldVal) {
        if (oldVal.length <= 0) {
          return
        }
        console.log('paper2 change map:')
        this.$router.replace({
          path: '/tech',
          query: {
            type: this.typeMap[this.activeIndex]
          }
        })
        this.reload()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 140px;
  left: 0;
  top: 0;
  position: absolute;
  line-height: 70px;
  width: 100%;
}

.header_logo {
  position: absolute;
  left: 5%;
  // padding: 4px 28px 0 30px;
  //top: 1px;
  width: 23%;
  //top:0;
  //bottom: 10px;
}

.header_subtitle {
  position: absolute;
  left: 29%;
  font-family: "Arial Black";
  font-size: large;
  color: #006699;
}

.header_warning {
  position: absolute;
  right: 10%;
  font-family: "Arial Black";
  font-size: small;
  color: crimson;
}

.header_select {
  position: absolute;
  // padding: 4px 28px 0 30px;
  top: 66px;
}

.header_search {
  position: absolute;
  right: 0px;
  //padding: 4px 28px 0 30px;
  top: 65px;
}

.body {
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
}

.gContainer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.chart_graph {
  border: 1px solid #ededed;
  width: calc((100% - 30px) * 0.9);
  height: 800px;
  margin: 0 10px 10px 0;
  float: left;
}

.chart_graph:nth-child(3n) {
  margin-right: 0;
}

.el-menu-item.is-active {
  background: #336699 !important;
  color: #fff !important;
}

.chart_barHor {
  border: 1px solid #ededed;
  width: calc((100% - 30px) / 2);
  height: 500px;
  margin: 0 10px 10px 0;
  float: left;
}

.chart_barHor:nth-child(3n) {
  margin-right: 0;
}

.chart_line {
  border: 1px solid #ededed;
  width: calc((100% - 30px) / 2);
  height: 500px;
  margin: 0 10px 10px 0;
  float: right;
}

.chart_line:nth-child(3n) {
  margin-right: 0;
}
</style>
